import { useState } from 'react'
// =====================================================================
import lb1Img from '@img/quality/lb1.png'
import csImg from '@img/quality/cs.png'

const Index = ({data, onChange, thisRef}, ref) => {
	const [show, setShow] = useState(false)
	const pClick = () => {
		data.data.length && !thisRef.type && setShow(!show)
		onChange(0, data)
	}
	const cClick = item => {
		onChange(1, item)
		if(thisRef.pageRef.state.index === 1) {
			thisRef.pageRef.page1Ref.refs.ref.tableRef.fetch()
		}else{
			thisRef.pageRef.setState({index: 1})
		}
	}
	return <div>
		<div className='fxm cp' style={{margin: '2px 0'}} onClick={pClick}>
			<div style={{width: 6}} className='mr10 fx'>{data.data.length ? <i className='arrow' style={{transform: show ? 'rotate(45deg)' : 'rotate(-45deg)'}}></i> : '' }</div>
			<img src={lb1Img} alt='' />
			<span className='ml5 plr5 g9 r5px' style={{background: !thisRef.type && thisRef.pRow?.id === data.id ? '#eee' : ''}}>{data.name}</span>
		</div>
		<div style={{display: show ? 'block' : 'none'}}>
			{ data.data.length ? data.data.map(item => <div style={{margin: '2px 0 2px 30px'}} key={item.uuid} className='fxm cp' onClick={() => cClick(item)}>
				<img src={csImg} alt='' />
				<span className='ml5 plr5 g9 nowrap r5px' style={{background: thisRef.type && thisRef.cRow?.uuid === item.uuid ? '#eee' : ''}}>{item.analyte_name}</span>
			</div>) : '' }
		</div>
	</div>
}

export default Index